<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Example 1 - Title Screen</title>

		<script>	

			window.onload = function () {
				var canvas = document.getElementById('myCanvas');
				var c = canvas.getContext('2d');

				var State = {
					_current: 0,
					INTRO: 0,
					LOADING: 1,
					LOADED: 2
				}
				
				window.addEventListener('click', handleClick, false);
				window.addEventListener('resize', doResize, false);
				
				doResize();
					
				function handleClick() {
					State._current = State.LOADING;
					fadeToWhite();
				}
				
				function doResize() {
					canvas.width = document.body.clientWidth;
					canvas.height = document.body.clientHeight;
					
					switch (State._current) {
						case State.INTRO:
							showIntro ();
							break;
					}
				}

				function fadeToWhite(alphaVal) {
					// If the function hasn't received any parameters, start with 0.02
					var alphaVal = (alphaVal == undefined) ? 0.02 : parseFloat(alphaVal) + 0.02;
					
					// Set the color to white				
					c.fillStyle = '#FFFFFF';
					// Set the Global Alpha
					c.globalAlpha = alphaVal;

					// Make a rectangle as big as the canvas
					c.fillRect(0, 0, canvas.width, canvas.height);
					
					if (alphaVal < 1.0) {
						setTimeout(function() {
							fadeToWhite(alphaVal);
						}, 30);
					} else {
						State._current = State.LOADED;
					}
				}

				function showIntro () {
					var phrase = "Click or tap the screen to start the game";

					// Clear the canvas
					c.clearRect (0, 0, canvas.width, canvas.height);
					
					// Make a nice blue gradient
					var grd = c.createLinearGradient(0, canvas.height, canvas.width, 0);
					grd.addColorStop(0, '#ceefff');
					grd.addColorStop(1, '#52bcff');
					
					c.fillStyle = grd;
					c.fillRect(0, 0, canvas.width, canvas.height);

					var logoImg = new Image();
					logoImg.src = '../img/logo.png';

					// Store the original width value so that we can keep the same width/height ratio later
					var originalWidth = logoImg.width;

					// Compute the new width and height values
					logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
					logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
					
					// Create an small utility object
					var logo = {
						img: logoImg,
						x: (canvas.width/2) - (logoImg.width/2),
						y: (canvas.height/2) - (logoImg.height/2)
					}

					// Present the image
					c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

					// Change the color to black
					c.fillStyle = '#000000';
					c.font = 'bold 16px Arial, sans-serif';
										
					var textSize = c.measureText (phrase);
					var xCoord = (canvas.width / 2) - (textSize.width / 2);
					
					c.fillText (phrase, xCoord, (logo.y + logo.img.height) + 50);
				}
			}			
		</script>
		<style type="text/css" media="screen">
			html { height: 100%; overflow: hidden }
			body {
				margin: 0px;
				padding: 0px;
				height: 100%;
			}
		</style>
		
    </head>
    <body>
		<canvas id="myCanvas" width="100" height="100">
			Your browser doesn't include support for the canvas tag.
		</canvas>
    </body>
</html>